<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
${aier_doctype}
<html <s:property value="aier_html_xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<link href="${aier_css_url}jc/chosen.css" rel="stylesheet">
<link href="${aier_css_url}jq/jq.css" rel="Stylesheet" />
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}text.css" />
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}enhanced.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />
<link rel="stylesheet" href="${aier_css_url}proxy/pv.css" />


<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/hh/ui.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/block.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/arrayList.js"></script>
<script type="text/javascript" src="${aier_js_url}jc/cj.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}custominput.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}text.js"></script>
<title>视频设备</title>
</head>
<script type="text/javascript">
var txt_vid;
// 弹出层
$(function() {

	$("#videoInfoDetail").dialog({
		//背景变暗
		modal : true,
		autoOpen : false,
		show : "blind",
		//hide : "explode",
		width : "620",
		height : "300"
	});

});

vedioInfoLoad();
	//
function vedioInfoLoad() {
	$(document).ready(function() {
		$("#videoinfo").jqGrid({
			url : '${aier_url}${aier_urijs}proxy_video_showVideo${aier_suffix}?pid=${pid}',
			datatype : "json",
			mtype : 'GET',
			height : '230',
			width : '960',
			colNames : [ '设备编码', '状态', '用户名','密码', '访问地址', '设备厂商', '操作', '状态','编号' ],
			colModel : [ 
			{name : 'sn',index : 'sn',width : 100,align : 'center'}, 
			{name : 'stateStr',index : 'stateStr',width : 100,align : 'center'}, 
			{name : 'user',index : 'user',width : 100,align : 'center'},
			{name : 'pwd',index : 'pwd',width : 100,align : 'center'}, 
			{name : 'url',index : 'url',width : 150,align : 'center'}, 
			{name : 'supplierStr',index : 'supplierStr',width : 100,align : 'center'}, 
			{name : 'revoked',index:'revoked',width:100,sortable:false,align:'center'},
			{name : 'state',index:'state',hidden : true},
			{name : 'vid',index:'vid',hidden : true}
			 ],
			//autowidth:true,
			jsonReader : {
				root : "vds",
				page : "page",
				total : "page_count",
				repeatitems : false
			},
			pager : jQuery("#videopage"),
			prmNames : {
				page : "page",
				sort: "sort"
			},
			rowNum : 10,
			//rowList: [10, 20, 30],
			sortname : 'sn',
			hidegrid : false,
			sortorder : 'asc',
			viewrecords : true,
			caption : '视频设备',
			gridComplete:function(){
				var ids=jQuery("#videoinfo").jqGrid('getDataIDs');
				for(var i=0; i<ids.length; i++){
					var id=ids[i];   
					var state = jQuery("#videoinfo").jqGrid('getRowData', id).state;
					if (state == 0 || state == 10) {
						re = "<a href='javascript:;' class='jqtrow' onclick='setVedio(" + id + ")'>设置</a>"; 
					} else {
						re = "<a href='javascript:;' class='jqtrow' onclick='delVedio(" + id + ")'>删除</a>"; 
					}
					jQuery("#videoinfo").jqGrid('setRowData', ids[i], {revoked:re});
				}
			}
		}).navGrid("#videopage", { edit: false, add: false, del: false, search: false });
		
	});
}
	
	
	function search(){
		var info_sn = $("#info_sn").val();
		var info_state = $('#info_state  option:selected').val();
		var info_supplier = $('#info_supplier option:selected').val();
		jQuery("#videoinfo").jqGrid('setGridParam',{url:"${aier_url}${aier_urijs}proxy_video_showVideo${aier_suffix}?pid=${pid}&sn="+info_sn+"&state="+info_state
			+"&supplier="+info_supplier,page:1}).trigger("reloadGrid");
	}
	
	// 删除报废设备
	function delVedio(id){
		if (!confirm("确定要删除该设备吗？")) {
			return
		} else {
			var fun = function(data) {
				if(1==data.s){
					$().message("删除成功!");
					$("#videoinfo").trigger("reloadGrid");
				}else{
					$().message("删除失败!");
				}
			};
			exeAjax(ajaxUrl("${aier_url}${aier_urijs}proxy_video_delVideo${aier_suffix}"), fun, 
			{"vid" : jQuery("#videoinfo").jqGrid('getRowData', id).vid});
		}
			
	}
	
	function setVedio(id) {
		var vid = jQuery("#videoinfo").jqGrid('getRowData', id).vid;
		txt_vid = vid;
		$("#videoInfoDetail").dialog("open");
		var fun = function(data) {
			var videoDevice = data.videoDevice;
			var entranceList = data.entranceList;
			
			var t = "<select style='border-color: #45930b;width:150px;height:25px' id='txt_entreance'><option value='-1'>不设置</option>";
			if(entranceList!=null && entranceList.length>0){
				for ( var i = 0; i < entranceList.length; i++) {
					var entrance = entranceList[i];
					t += "<option value="+entrance.eid;
					if (entrance.vdid == videoDevice.vid) {
						t+=" selected='selected'";
					}
					t+=">" + entrance.sn + "</option>";
				}
			};
			t += "</select>";
			$('#up_entrance').html(t);
			
			$('#old_sn').html(videoDevice.sn);
			$('#txt_state').val(videoDevice.state);
			
			$('#txt_user').val(videoDevice.user);
			$('#old_supplier').html(videoDevice.supplierStr);
			$('#txt_pwd').val(videoDevice.pwd);
		};
		exeAjax(
				ajaxUrl("${aier_url}${aier_urijs}proxy_video_showVideoDetail${aier_suffix}"),
				fun, {
					"vid" : vid,
					"pid" : "${pid}" 
				});

	}
	
	function updateLoad() {
		var fun = function(data) {
			if (data.s == 1) {
				$().message("设置成功");
				$("#videoInfoDetail").dialog("close");
				$("#videoinfo").trigger("reloadGrid");
			} else{
				$().message("修改失败");
			}
		};
		exeAjax(
			ajaxUrl("${aier_url}${aier_urijs}proxy_video_updateLoad${aier_suffix}"),
			fun, {
				"vid" : txt_vid,
				"state":$('#txt_state').find("option:selected").val(),
				"user":$('#txt_user').val(),
				"pwd":$('#txt_pwd').val(),
				"entrance":$('#txt_entreance').find("option:selected").val()
			});
	}
	
	function setGone() {
		var vid = $('#txt_vid').val();
		var fun = function(data) {
			if (data.s == 1) {
				$().message("设置成功");
				$("#videoInfoDetail").dialog("close");
				$("#videoinfo").trigger("reloadGrid");
			} else {
				$().message("设置失败");
			}
		};
		exeAjax(
			ajaxUrl("${aier_url}${aier_urijs}proxy_video_setGone${aier_suffix}"),
			fun, {
				"vid" : txt_vid
			});
	}

</script>

<body>

	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">视频设备</a></li>
		</ul>
		<div id="tabs-1" style="height: 500px;">
			<div class="d_content">

				<div class="d_scnOut">
					<div class="d_scname">
						<label>视频编号:</label>
					</div>
					<div class="d_sctext">
						<input type="text" id="info_sn">
					</div>
				</div>
				<div class="d_scnOut" style="margin-top: -40px;margin-left: 230px;">
					<div class="d_scname">
						<label>状态:</label>
					</div>
					<div class="sel_position">
						<select id="info_state">
							<option value="-1">不限</option>
							<option value="10">启用</option>
							<option value="0">停用</option>
							<option value="-10">报废</option>
						</select>
					</div>
				</div>
				<div class="d_scnOut" style="margin-top: -40px;margin-left: 460px;">
					<div class="d_scname">
						<label>厂商:</label>
					</div>
					<div class="sel_position">
						<select id="info_supplier">
							<option value="-1">不限</option>
							<option value="1">威视达康</option>
							<option value="2">海康威视</option>
						</select>
					</div>
				</div>
				<div style="margin-top: -40px;margin-left: 680px;">

					<button onclick="search()"
						class="b_lmSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
						role="button" aria-disabled="false">
						<span class="ui-button-text">查询</span>
					</button>
					
				</div>
				
				<!-- 表格内容 -->
				<div style="margin-top: 30px;margin-left: 20px;">

					<table id="videoinfo"></table>
					<div id="videopage"></div>
				</div>
				
				<!-- 弹出层内容 显示详细资料并修改-->
				<div id="videoInfoDetail" title="视频设备信息">
					<div class="d_scnOut">
						<div class="d_scname" style="font-size: 14px;">
							<label>设备编码:</label>
						</div>
						<div class="d_sctext" style="font-size: 14px;" id="old_sn">
							${videoDevice.sn}
						</div>
						<div class="d_sctext" style="font-size: 14px; display: none" id="up_sn">
							<input type="text" id="txt_sn" class="txt_scname">
						</div>
					</div>
					<div class="d_scnOut">
						<div class="d_scname" style="font-size: 14px;">
							<label>状态:</label>
						</div>
						<div class="d_sctext" id="old_state" style="display: none;">
						</div>
						<div class="sel_position" id="up_state">
						<select id="txt_state">
							<option value="10" selected="selected">启用</option>
							<option value="0">停用</option>
							<option value="-10">报废</option>
						</select>
						</div>				
						
					</div>

					<div class="d_scnOut">
						<div class="d_scname" style="font-size: 14px;">
							<label>用户名:</label>
						</div>
						<div class="d_sctext" style="display: none;" id="old_user">
						</div>
						<div class="d_sctext" style="font-size: 14px;" id="up_user">
							<input type="text" id="txt_user" class="txt_scname" value="${videoDevice.user}">
						</div>
					</div>

					<div style="margin-top: -118px;margin-left: 300px;">
						<div class="d_scnOut">
							<div class="d_scname" style="font-size: 14px;">
								<label>设备厂商:</label>
							</div>
							<div class="d_sctext" style="font-size: 14px;" id="old_supplier">
								${videoDevice.supplierStr}
							</div>
							<div class="d_sctext" style="font-size: 14px; display: none" id="up_supplier">
								<input type="text" id="txt_supplier" class="txt_scname">
							</div>
						</div>

						<div class="d_scnOut">
							<div class="d_scname" style="font-size: 14px;">
								<label>密码:</label>
							</div>
							<div class="d_sctext" style="font-size: 14px; display: none;" id="old_pwd">
							</div>
							<div class="d_sctext" style="font-size: 14px;" id="up_pwd">
								<input type="text" id="txt_pwd" value="${videoDevice.pwd}">
							</div>
						</div>
						
						<div class="d_scnOut">
						<div class="d_scname" style="font-size: 14px;">
							<label>门禁设备:</label>
						</div>
						<div class="d_sctext" style="display: none;" id="old_user">
						</div>
						<div class="sel_position" id="up_entrance">
							<select id="txt_entreance">
								<option value="-1" selected>不设置</option>
							</select>
						</div>		
					</div>
					</div>
					<button id="b_siUpdate"
						class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
						role="button" aria-disabled="false"
						style="left: 270px; top: 70px;" onclick="updateLoad();">
						<span class="ui-button-text">修改</span>
					</button>
					<!-- <button id="b_siClose"
						class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
						role="button" aria-disabled="false"
						style="left: 260px; top: 70px;" onclick="setGone()">
						<span class="ui-button-text">报废</span>
					</button> -->
				</div>
				
			</div>
		</div>
	</div>
	
</body>
<script type="text/javascript">
$("#tabs").tabs();
</script>
</html>